<script setup>
import * as echarts from 'echarts/core'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import { LabelLayout } from 'echarts/features';
import { ref,onMounted,onUnmounted } from 'vue'
echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout
]);//注册必须的组件和渲染器
const chartRef = ref(null)
const getMap = () => {//获取柱状图
  const myChart = echarts.init(chartRef.value,null,{
    renderer:'canvas',
    useDirtyRect:false
  });
const option = {
  color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff','#1d9dff'],
  legend: {
    top: 'bottom',
    itemWidth:10,
    itemHeight:10,
    textStyle: {
        color: "rgba(255,255,255,.5)",
        fontSize: "10"
      }
  },
  tooltip: {
      trigger: 'item'
    },
  series: [
    {
      name: '地区分布',
      type: 'pie',
      radius: ['10%', '70%'],
      center: ['50%', '35%'],
      roseType: 'radius',
      label: {
          fontSize: 10
        },
      labelLine: {
        // 连接扇形图线长
          length: 6,
        // 连接文字线长
          length2: 8
        },
      data: [
         { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 42, name: '湖北' }
      ]
    }
  ]
};
  myChart.setOption(option);
  window.addEventListener('resize', myChart.resize);
}
onMounted(async()=>{
  await getMap()
})
onUnmounted(() => {
  if (myChart) {
    window.removeEventListener('resize', handleResize); // 移除事件监听
    myChart.dispose(); // 销毁图表实例
    myChart = null; // 释放引用
  }
});
</script>
<template>
<div class="bartu" ref="chartRef">

</div>
</template>
<style scoped lang="less">
.bartu{
  height:240px;
}
</style>